<template>
  <div class="home-detail-wrapper">
    <div @click="toMain">
      <mt-header fixed :title="title" style="-webkit-transform: translate3d(0,0,0);">
        <mt-button icon="back" slot="left" @click.stop="goBack">返回</mt-button>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      </mt-header>
    </div>

    <mt-loadmore style="padding-bottom: 68px; margin-top: 40px;">
      <div class="head">
        <div class="row">
          <p style="font-size: 21px;">{{ head.title }}</dpiv>
          <div>{{ head.publishTime }} </div>
        </div>
        <div class="row">
          <p style="font-size: 15px">{{ head.publisher }}</p>
          <div class="tip"><i class="fa fa-eye" aria-hidden="true"></i> {{ head.viewCount }} </div>
        </div>
        <div class="row">
          <p style="font-size: 17px" v-html="head.other">
          </p>
        </div>
      </div>
      <div class="crux">
        <p v-for="item in crux" :key="item.name">
            <i v-if="item.name === 'time'" class="fa fa-clock-o" aria-hidden="true"></i>
            <i v-else-if="item.name === 'address'" class="fa fa-map-marker" aria-hidden="true"></i>
            <i v-else-if="item.name === 'limit'" class="fa fa-user" aria-hidden="true"></i>
            <i v-else-if="item.name === 'type'" class="fa fa-tag" aria-hidden="true"></i>
            <i v-else-if="item.name === 'endTime'" class="fa fa-hourglass-end" aria-hidden="true"></i>
            <span style="padding-right: 8px;"> {{ item.key }}:</span>
            <span v-if="item.name === 'time'" style="font-size: 15px; color: #f99338">{{ item.value }}</span>
            <span v-else style="font-size: 15px;">{{ item.value }}</span>
        </p>
      </div>
      <div v-for="content in contentList" :key="content.title" class="content">
        <p class="title">{{ content.title }}</p>
        <div class="desc">{{ content.desc }}</div>
        <div v-if="content.tip" class="tip">
          <span>温馨提示:    </span>
          {{ content.tip }}
          </div>
      </div>
    </mt-loadmore>
    <div class="bottom">
      <div class="left">
        <div><a :href="'tel://' + contact.phone" style="color: #ffffff;"><i class="fa fa-phone" aria-hidden="true"></i> 咨询</a></div>
        <div v-if="collectStatus === '1'"  @click="cancleCollection()"><i class="fa fa-star" aria-hidden="true"></i> 已收藏</div>
        <div v-else @click="update(1)"><i class="fa fa-star-o" aria-hidden="true"></i> 收藏</div>
      </div>
      <div v-if="applyStatus === null || applyStatus === '4' " class="right" @click="update(2)">立即报名</div>
      <div v-else class="right disable">{{ applyStatusName }}</div>
    </div>
  </div>
</template>
<script>
import axios from '@/api/axiosApi'
import { mapGetters } from 'vuex'
import { Toast } from 'mint-ui'

export default {
  data () {
    return {
      title: '兼职信息',
      id: '',
      head: {},
      crux: [],
      contentList: [],
      contact: {
        name: '田淋勇',
        phone: '18798750736'
      },
      collectStatus: '0',
      applyStatus: '4',
      applyStatusName: '未报名'
    }
  },
  computed: {
    ...mapGetters([
      'personInfo',
      'count'
    ])
  },
  methods: {
    toMain () {
      this.$router.replace({
        path: '/',
        query: this.$route.query
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    _getDetail (type, id) {
      const _self = this
      const openId = localStorage.getItem('openId')
      const data = {
        id: id,
        studentId: openId,
        type: type
      }
      axios.post('/commons/findActivityDetail', data, (data) => {
        if (data === null) {
          return
        }
        if (type === '1') {
          _self.head = {
            title: data.partTimeJobName,
            publishTime: data.createAt,
            publisher: data.orgName,
            viewCount: data.browseNum,
            other: data.salary + '&emsp;(' + data.meansOfSalary + ')'
          }
          _self.crux = [
            {
              name: 'time',
              key: '工作时间',
              value: data.workTime
            },
            {
              name: 'address',
              key: '工作地址',
              value: data.workLocation
            },
            {
              name: 'limit',
              key: '招聘人数',
              value: data.count + '/' + data.needPeopleNumber + '人'
            },
            {
              name: 'type',
              key: '工作类型',
              value: data.typeName
            },
            {
              name: 'endTime',
              key: '截止时间',
              value: data.applyTime
            }
          ]
          _self.contentList = [
            {
              title: '工作描述',
              desc: data.workIntro
            },
            {
              title: '工作要求',
              desc: data.workRequired,
              tip: '请拨打QD校园客服：187-8662-4216'
            }
          ]
          _self.contact = {
            name: data.contactPeople,
            phone: data.contactPhone
          }
        } else if (type === '2') {
          _self.head = {
            title: data.trainingName,
            publishTime: data.createAt,
            publisher: data.orgName,
            viewCount: data.browseNum,
            other: 'QD校园团购价:&emsp;' + data.trainingCost + '元'
          }
          _self.crux = [
            {
              name: 'time',
              key: '培训时间',
              value: data.trainingTime
            },
            {
              name: 'address',
              key: '培训地点',
              value: data.trainingLocation
            },
            {
              name: 'limit',
              key: '报名人数',
              value: data.count + '/' + data.needPeopleNumber + '人'
            },
            {
              name: 'type',
              key: '培训类型',
              value: data.typeName
            }
          ]
          _self.contentList = [
            {
              title: '培训说明',
              desc: data.trainingIntro,
              tip: '请拨打QD校园客服：187-8662-4216'
            },
            {
              title: '课程内容',
              desc: data.trainingContent
            }
          ]
          _self.contact = {
            name: data.contactPeople,
            phone: data.contactPhone
          }
        }
        _self.collectStatus = data.collectStatus === null ? null : data.collectStatus + ''
        _self.applyStatus = data.applyStatus === null ? null : data.applyStatus + ''
      })
    },
    cancleCollection () {
      const type = this.$route.params.type
      const id = this.$route.params.contentId
      const openId = localStorage.getItem('openId')
      let data = {
        studentId: openId
      }
      if (type === '1') {
        // 兼职
        data.partTimeJobId = id
      } else if (type === '2') {
        data.trainingJobId = id
      }
      const _self = this
      axios.post('/commons/cancleCollection', data, (data) => {
        _self.collectStatus = '0'
        let count = _self.count
        count.scCount--
        _self.$store.commit('changeCount', count)
        Toast('取消收藏成功!')
      })
    },
    update (status) {
      const _self = this
      const type = this.$route.params.type
      const id = this.$route.params.contentId
      const openId = localStorage.getItem('openId')
      if (openId === null) {
        Toast('请先到【个人中心】登录和完善个人信息')
        return
      }
      let data = {
        studentId: openId
      }
      if (status === 1) {
        // 收藏
        data.collectStatus = 1
      } else {
        // 报名
        data.applyStatus = 0
      }
      if (type === '1') {
        // 兼职
        data.partTimeJobId = id
      } else if (type === '2') {
        data.trainingJobId = id
      }
      let count = _self.count
      axios.post('/commons/update', data, (data) => {
        if (status === 1) {
          if (_self.collectStatus === '0') {
            Toast('收藏成功!')
            _self.collectStatus = '1'
          }
          count.scCount++
        } else {
          Toast('报名成功!')
          const type = _self.$route.params.type
          const id = _self.$route.params.contentId
          _self._getDetail(type, id)
          count.applyCount++
        }
        _self.$store.commit('changeCount', count)
      })
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'homeDetail') {
        const type = this.$route.params.type
        const id = this.$route.params.contentId
        if (type && id) {
          if (type === '1') {
            this.title = '兼职信息'
          } else {
            this.title = '培训信息'
          }
          this._getDetail(type, id)
        }
      }
    },
    applyStatus (newItem) {
      switch (newItem) {
        case '0':
          this.applyStatusName = '已报名'
          break
        case '1':
          this.applyStatusName = '已录用'
          break
        case '2':
          this.applyStatusName = '未结算'
          break
        case '3':
          this.applyStatusName = '已结算'
          break
        case '4':
          this.applyStatusName = '立即报名'
          break
        default:
          this.applyStatusName = '不可报名'
      }
      const openId = localStorage.getItem('openId')
      if (openId === null && newItem === null) {
        this.applyStatusName = '立即报名'
      }
    }
  },
  mounted () {
    const type = this.$route.params.type
    const id = this.$route.params.contentId
    if (type && id) {
      this._getDetail(type, id)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/stylus/variable.styl';

.home-detail-wrapper {
  overflow-y: visible;
  .head {
    background-color: #ffffff;
    padding: 8px 12px;
    border-bottom: 1px solid $color-border-4;
    .row {
      display: flex;
      justify-content: space-between;
      height: 30px;
      line-height: 35px;
      p {
        font-size: 18px;
        max-width: 68%;
      }
      div {
        font-size: 13px;
        color: $color-text-dark
      }
    }
  }
  .crux {
    background-color: #ffffff;
    margin-top: 18px;
    padding: 8px 12px;
    border-bottom: 1px solid $color-border-4;

    p {
      height: 26px;
      line-height: 26px;
      font-size: 16px;
      i {
        width: 21px;
        text-align: center;
        color: $color-info;
      }
    }
  }

  .content {
    background-color: #ffffff;
    margin-top: 18px;
    padding: 9px 12px;
    border-bottom: 1px solid $color-border-4;
    line-height: 1.2rem;
    .title {
      font-size: 18px;
      padding-top: 8px;
      padding-bottom: 10px;
    }

    .tip {
      margin-top: 8px;
      color: $color-text-dark;
      font-size: 13px;
      span {
        color: $color-theme;
        padding-right: 8px;
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #fbfbfb;
    padding: 12px 9px;
    border-top: 1px solid $color-border-4;
    display: flex;
    justify-content: space-between;

    .left {
      width: 50%;
      display: flex;
      justify-content: flex-start;
      color: #fff;
      font-size: 15px;
      div {
        background-color: $color-info;
        padding: 7px 10px;
        border-radius: 5px;
        margin-right: 8px;
      }
    }
    .right {
      width: 50%;
      text-align center;
      background-color: $color-theme
      line-height: 28px;
      border-radius: 14px;
      color: #fff;
    }
    .right.disable {
      color: #f3c569;
      background-color: oldlace;
      border-color: #fbeccd;
    }
  }
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>


